<template>
  <view class="wrp">
    <view class="b_title">欢迎使用 指北星</view>
    <view class="s_title">立即登录，享受优质服务</view>
    <image class="logo_img" src="https://app.zbzedu.com/static/WaChat/img/logo.png"></image>
    <button class="wx_btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
      <u-icon name="weixin-fill" size="32"></u-icon><text style="margin-left: 10upx">微信用户一键登录</text>
    </button>
    <navigator :url="`/package/login/phone_login?backUrl=${backUrl}`" class="tips">手机号码登录</navigator>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";
  import loginMixins from "../../pages/mixins/loginMixins.js";

  export default {
    mixins: [loginMixins],
    data() {
    	return {
        openId: '',
        sessionKey: '',
        encryptedData: '',
        iv: '',
        backUrl: ''
      }
    },

    onLoad(options) {
      if (options.backUrl) {
        this.backUrl = options.backUrl
      }
    },

    onShow() {
      this.beforeGetPhone()
    },

    methods: {
      beforeGetPhone() {
        var _this = this
        uni.login({
          provider: 'weixin',
          success(loginRes) {
            _this.getOpenId(loginRes.code)
          }
        })
      },
    	// 获取电话号码的回调,获取openID
      getphonenumber(res) {
        if (res.detail.errMsg == "getPhoneNumber:ok") {
          request({
            url: '/app/base/wxLogin',
            method: 'post',
            token: true,
            header: {'Content-Type':'application/x-www-form-urlencoded'},
            data: {
              openId: this.openId,
              sessionKey: this.sessionKey,
              encryptedData: res.detail.encryptedData,
              iv: res.detail.iv
            }
          }).then(ret => {
            TOAST('登录成功');
            var user = {};
            user.token = ret.data.token;
            user.mobile = ret.data.phone
            user.userId = ret.data.userId
            uni.setStorageSync(process.env.NODE_ENV + 'zbz_user', user);
            this.backUrl = this.backUrl.replace(/#/g, '?').replace(/@/g, '&').replace(/\*/g, '=')
            if (this.backUrl) {
              if (this.backUrl.charAt(0) != '/') {
                this.backUrl = '/' + this.backUrl
              }
              (this.backUrl.includes('pages/index/index') || this.backUrl.includes('pages/forum/index') || this.backUrl.includes('pages/user/index')) ?
                this.$u.route({
                  url: this.backUrl.split('?')[0],
                  type: 'switchTab'
                }) : this.$u.route({
                  url: this.backUrl,
                  type: 'redirectTo'
              })
            } else {
              this.$u.route({
                url: '/pages/index/index',
                type: 'switchTab'
              })
            }

          })
        } else {
          TOAST('您拒绝了授权，请重新点击登录按钮！')
        }
      },

      // 获取openId和sessionKey
      getOpenId(code) {
        var _this = this
        request({
          url: '/wx/getOpenIdByCode/' + code,
          platfom: 'weixin',
          token: true
        }).then(response => {
          _this.openId = response.openid
          _this.sessionKey = response.sessionKey
          let user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
          if (!user) {
            user = {}
          }
          user.openId = response.openid
          uni.setStorageSync(process.env.NODE_ENV + 'zbz_user', user);
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .wrp {
    padding: 0 46upx;
    box-sizing: border-box;
  }
  .b_title {
    color: rgba(16, 16, 16, 100);
    font-size: 48upx;
    margin-top: 36upx;
  }
  .s_title {
    margin-top: 10upx;
    color: rgba(117, 117, 117, 100);
    font-size: 28upx;
  }
  .logo_img {
    width: 310upx;
    height: 310upx;
    margin: 0 auto;
    margin-top: 138upx;
    display: block;
    margin-bottom: 140upx;
  }
  .wx_btn {
    color: #fff;
    background: #1F476D;
    height: 90upx;
    border-radius: 16upx;
    text-align: center;
    line-height: 90upx;
    font-size: 28upx;
    &:before, &:after {
      border: none;
    }
  }
  .tips {
    text-align: center;
    padding: 10upx 0;
    color: #78797A;
  }
</style>
